<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>用户组</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-button type="primary" @click="showDialog = true">添加用户组</el-button>
                    </div>
                </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80" />
                    <el-table-column prop="name" label="分组名称" />
                    <el-table-column label="操作操作" width="250">
                        <template #default="scope">
                            <el-button type="warning" @click="edit(scope.row)">编辑</el-button>
                             <el-popconfirm title="确定删除此用户组?" @confirm="admin_group_delete(scope.row.id)">
                                <template #reference>
                                    <el-button type="danger" >删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>


    <!-- 添加 -->
    <el-dialog v-model="showDialog" title="添加分组" center width="38%" @close="handleClose">
        <el-form label-width="100px">
            <el-form-item label="分组名称">
                <el-input type="text" v-model="formData.name" placeholder="用户分组名称" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="danger" @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="SubmitFormData">保存</el-button>
        </template>
    </el-dialog>
	
	<!-- 修改 -->
	<el-dialog v-model="editDialog" title="修改分组" center width="38%" @close="handleClose">
	    <el-form label-width="100px">
	        <el-form-item label="分组名称">
	            <el-input type="text" v-model="formData.name" placeholder="用户分组名称" />
	        </el-form-item>
	    </el-form>
	    <template #footer>
            <el-button type="danger" @click="handleClose">取消保存</el-button>
	        <el-button type="primary" @click="SubmitFormData">保存</el-button>
	    </template>
	</el-dialog>
	
	
	
</template>

<script setup>
import { ref, reactive, onMounted, inject, getCurrentInstance } from 'vue'
import { success, error } from '@/common/tool/message.js'
import { request_post } from '@/common/axios/request.js'
import { ArrowRightBold, Delete } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
const showDialog = ref(false)
const editDialog = ref(false)
const tableData = reactive({ list: [] })

const formData = reactive({
	id: '',
    name: '',
})

function SubmitFormData() {
    admin_group_create()
}

onMounted(() => {
	admin_group_index()
})

// 获取列表
function admin_group_index() {
    request_post('/admin_group_index', page).then(res => {
        console.log(res)
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })
}

// 添加
function admin_group_create() {

    if (formData.name == '') {
        return error('分组名称不能为空')
    }
    request_post('/admin_group_create', formData).then(res => {
        if (res.data.code == 200) {
            admin_group_index()
            showDialog.value = false
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}

// 删除
function admin_group_delete(id) {
    request_post('/admin_group_delete', { id }).then(res => {
        if (res.data.code == 200) {
            admin_group_index()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}


// 分页
const page = reactive({
    pagenum: 1,
    pagesize: 15,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
    admin_group_index()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_group_index()
}


function edit(item) {
    formData.id = item.id
    formData.name = item.name
    editDialog.value = true
}
function handleClose() {
    formData.id = ''
    formData.name = ''
}

</script>

<style></style>
